<template>
  <div>
    <a-alert message="tips：开启F12查看控制台，即可看到接口相关信息打印~"
             type="info"></a-alert>
    <a-card :title="`请求掘金 ${isMock==='true'?'【mock】':''}`">
      <a-table rowKey="user_id"
               :columns="master.columns"
               :dataSource="master.tableData"
               :loading="master.loading"
               :pagination="false">
        <template #avatar_large="{ text }">
          <img :src="text"
               width="50" />
        </template>
      </a-table>
    </a-card>

    <a-card title="请求简书">
      <a-table rowKey="id"
               :columns="jianshu.columns"
               :dataSource="jianshu.tableData"
               :loading="jianshu.loading"
               :pagination="false">
        <template #avatar_source="{ text }">
          <img :src="text"
               width="50" />
        </template>
      </a-table>
    </a-card>

    <a-card title="请求思否">
      <a-table rowKey="id"
               :columns="sifou.columns"
               :dataSource="sifou.tableData"
               :loading="sifou.loading"
               :pagination="false">
        <template #bannerUrl="{ text }">
          <img :src="text"
               width="100" />
        </template>
      </a-table>
    </a-card>

  </div>
</template>


<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  reactive,
  toRaw,
  watch
} from 'vue';

import useGlobal from '@/hooks/useGlobal';

export default defineComponent({
  name: 'SolutionRequestMulti',
  setup(props, ctx) {
    const { $request } = useGlobal();

    const master = reactive({
      loading: false,
      tableData: [],
      columns: [
        {
          title: '用户名',
          dataIndex: 'user_name',
          align: 'center'
        },
        {
          title: '头像',
          dataIndex: 'avatar_large',
          slots: { customRender: 'avatar_large' },
          align: 'center'
        }
      ] as IColumn[]
    });

    const jianshu = reactive({
      loading: false,
      tableData: [],
      columns: [
        {
          title: '用户名',
          dataIndex: 'nickname',
          align: 'center'
        },
        {
          title: '头像',
          dataIndex: 'avatar_source',
          slots: { customRender: 'avatar_source' },
          align: 'center'
        }
      ] as IColumn[]
    });

    const sifou = reactive({
      loading: false,
      tableData: [],
      columns: [
        {
          title: '标题',
          dataIndex: 'title',
          align: 'center'
        },
        {
          title: 'banner',
          dataIndex: 'bannerUrl',
          slots: { customRender: 'bannerUrl' },
          align: 'center'
        }
      ] as IColumn[]
    });

    const requestMaster = async () => {
      master.loading = true;
      const { err_no, data, err_msg } = await $request.get(
        'user_api/v1/author/recommend',
        {
          category_id: '',
          cursor: 0,
          limit: 5
        },
        {
          loading: false,
          codeErrTip: false
        }
      );
      master.loading = false;

      if (err_no === 0) {
        master.tableData = data;
      } else if (err_no === 1) {
      }
    };

    const requestJianshu = async () => {
      jianshu.loading = true;
      const { users } = await $request.get.jianshu(
        'users/recommended',
        {
          seen_ids: '',
          count: 10,
          only_unfollowed: true
        },
        {
          loading: false
        }
      );
      jianshu.loading = false;

      jianshu.tableData = users;
    };
    const requestSifou = async () => {
      sifou.loading = true;
      const { status, data } = await $request.get.sifou(
        'api/live/recommend',
        {},
        {
          loading: false
        }
      );
      sifou.loading = false;
      if (status === 0) {
        sifou.tableData = data;
      }
    };

    onMounted(() => {
      requestMaster();
      requestJianshu();
      requestSifou();
    });

    return {
      master,
      jianshu,
      sifou,
      isMock: process.env.MY_MOCK
    };
  }
});
</script>

<style lang="less" scoped>
</style>